{% extends 'base.html' %}
{% load staticfiles %}


{% block css %}
    <link href="{% static 'editor/css/froala_style.css' %}" rel="stylesheet">
    <link href="{% static 'editor/css/froala_editor.pkgd.min.css' %}" rel="stylesheet">{% endblock %}

{% block content %}


    <div class="container-fluid">  <!-- 开加一个container的目的是为了让整体布局居中 -->
    <!-- 开始 -->
    {#        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">#}
    {##}
    {##}
    {#            <div class="row"><!-- 将要加入的略缩图放入row中 -->#}
    {#                <!-- start第一张略缩图开始 -->#}
    {#                {% for item in itemlist %}#}
    {##}
    {#                    <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12" style="height: 430px;">#}
    {#                           #}
    {#                        <div class="thumbnail">#}
    {#                                  <a href="{{ item.coupon_share_url }}"><img src="{{ item.pict_url }}"#}
    {#                                                                             class="img-responsive"#}
    {#                                                                             style="width: 180px;height:180px">#}
    {#                                 </a>#}
    {#                            <div class="caption">#}
    {#                                <table>#}
    {#                                    <tr>#}
    {#                                        <td>#}
    {#                                            【商品标题】{{ item.title }}#}
    {#                                        </td>#}
    {#                                    </tr>#}
    {#                                    <tr>#}
    {#                                        <td>#}
    {#                                            <a href="vip.html">【商品id】{{ item.item_id }}</a>#}
    {#                                            <button onclick="copyToClip({{ item.item_id }})"> Copy</button>#}
    {#                                        </td>#}
    {#                                    </tr>#}
    {#                                    <tr>#}
    {#                                        <td>#}
    {#                                            【原价】{{ item.zk_final_price }}#}
    {#                                        </td>#}
    {#                                    </tr>#}
    {#                                    <tr>#}
    {#                                        <td>#}
    {#                                            【优惠券价格】{{ item.coupon_amount }}#}
    {#                                        </td>#}
    {#                                    </tr>#}
    {#                                    <tr>#}
    {#                                        <td>#}
    {#                                            【佣金比率】{{ item.commission_rate }}#}
    {#                                        </td>#}
    {#                                    </tr>#}
    {#                                </table>#}
    {##}
    {##}
    {#                                     #}
    {#                            </div>#}
    {#                               #}
    {#                        </div>#}
    {#                         #}
    {#                    </div>#}
    {#                    <!-- 第一张略缩图结束 -->#}
    {#                {% endfor %}#}
    {##}
    {#            </div>#}
    {##}
    {#        </div>#}
    <!-- 结束 -->
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">


        <section id="editor">
            <div id='froala-editor' style="margin-top: 30px;">
                {#{{ message }}#}
                {#                {% for i,o in abc %}#}
                <p style="text-indent:2em">{{ word.0 }}</p>
                <p style="text-indent:2em">{{ word.1 }}</p>
                <p><a class="fr-green" href="{{ item_TBK_url }}" target="_blank"><strong><span
                        style="color: rgb(255, 0, 0); font-size: 18px;">&gt;&gt;&gt;&gt;点击这里</span><span
                        style="color: rgb(255, 0, 0);"><span style="font-size: 16px;">查看最新真实分析，以免被骗&lt;&lt;&lt;&lt;希望对你有用</span></span></strong></a><br><a
                        href="{{ shop_TBK_LINK }}" target="_blank"><strong><span style="font-size: 16px;">&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;了解店铺更多详情(今日有活动领取优惠)</span></strong></a><span
                        style="font-size: 18px;">&nbsp;</span></p>
                <img class="center-block img-responsive" href="{{ pic.0 }}" src="{{ pic.0 }}">
                <img class="center-block img-responsive" href="{{ pic.1 }}" src="{{ pic.1 }}">
                <p style="text-indent:2em">{{ word.2 }}</p>
                <p style="text-indent:2em">{{ word.3 }}</p>
                <img class="center-block img-responsive" href="{{ pic.2 }}" src="{{ pic.2 }}">
                <p style="text-indent:2em">{{ word.4 }}</p>
                <p style="text-indent:2em">{{ word.5 }}</p>
                <img class="center-block img-responsive" href="{{ pic.3 }}" src="{{ pic.3 }}">
                <img class="center-block img-responsive" href="{{ pic.4 }}" src="{{ pic.4 }}">
                <p style="text-indent:2em">{{ word.6 }}</p>
                {#                {% endfor %}#}
                {#   淘宝客话术       #}
                <p style="text-align: center;"><strong><span style="font-size: 18px; color: rgb(147, 101, 184);">&gt;&gt;</span><span style="font-size: 18px; color: rgb(255, 0, 0);">隐藏福利 送你一个随时可以查优惠券的机器人，加微信免费领：xtyx22</span></strong></p>
                {#                <p style="text-align: center;"><img height="200px;&quot;" src="/static/peoplemod/content/20.jpg"#}
                {#                                                    class="fr-fic fr-dii"></p>#}
            </div>
            <button id="save">保存</button>
        </section>


    </div>

    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">


        <div class="row">
            <form class='form-login' action="{% url 'tbpinglun' %}" method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="form-group">
                    {{ getid.id.label }}
                    {{ getid.id }}
                </div>
                <button type="submit" class="btn btn-primary pull-right" id='sum'>上传</button>
            </form>
            <a class="btn btn-small btn-info" onclick="copyinfo()">复制文本</a>
        </div>
        {% if message %}
            <div class="alert alert-warning">{{ message }}</div>
        {% endif %}

    </div>






{% endblock %}

{% block script %}
    <script type="text/javascript">
        {#    alert('{{ wordList.0 }}')#}

        picture_num = 0;//设置一个全局的变量；

        {#        $("#btn").click(function(){#}
        {##}
        {#        i+=1;//第单击一次i的值加1；#}
        {#        alert(i)#}
        {#        $(this).attr("addval",i)#}
        {##}
        {#        });#}


        /**
         * 复制内容到粘贴板
         * content : 需要复制的内容
         * message : 复制完后的提示，不传则默认提示"复制成功"
         */
        {#    <h1>点击复制通用功能</h1>#}
        {#    <a href="https://blog.csdn.net/sunnyzyq/article/details/85065022">参考链接</a>#}
        function copyinfo() {
            {#            aaa = $('#edit').froalaEditor('html.get', true);#}
            console.log(editor.html.get());
            copycontent = editor.html.get();
            aux = document.createElement("input");
            aux.setAttribute("value", copycontent);
            document.body.appendChild(aux);
            aux.select();
            document.execCommand("copy");
            document.body.removeChild(aux);
        }

        function copyToClip(content, message) {
            aux = document.createElement("input");
            aux.setAttribute("value", content);
            document.body.appendChild(aux);
            aux.select();
            document.execCommand("copy");
            document.body.removeChild(aux);
            if (message = null) {
                alert("不成功");

            } else {
                {#                        alert(message);#}
                abc = document.getElementById('getid');

                abc.setAttribute('value', content);
                {#                window.location.href = "http://www.tbzhu.com/vip";#}

            }
        }

    </script>


    {#文本编辑框插件开始#}
    <script src="{% static 'editor/js/froala_editor.pkgd.min.js' %}"></script>
    <script src="{% static 'editor/js/languages/zh_cn.js' %}"></script>
    <script src="{% static 'editor/js/plugins/font_family.min.js' %}"></script>

    <script>

        {#        插入#}
        FroalaEditor.DefineIcon('insertHTML', {NAME: 'plus', SVG_KEY: 'add'});
        FroalaEditor.RegisterCommand('insertHTML', {
            title: '插入段落',
            focus: true,
            undo: true,
            refreshAfterCallback: true,
            callback: function () {
                this.html.insert('222这个是你要插入的段落,支持代码<img src="{% static 'img/logo.png' %}">');
                this.undo.saveStep();
            }
        });

        FroalaEditor.DefineIcon('insertHTML', {NAME: 'plus', SVG_KEY: 'add'});
        FroalaEditor.RegisterCommand('插入评论图片|', {
            title: '插入代码',
            focus: true,
            undo: true,
            refreshAfterCallback: true,
            callback: function () {
                {##从后台利用json.dumps 传过来给js的数据流，需要safe包装给mylist#}
                var mylist = {{ dumpspic|safe }};
                {# 循环调用图片列表#}
                if (picture_num >= mylist.length) {
                    picture_num = 0
                }

                {#this.html.insert('<p style="text-align: center;">如何使用这个呢<img src="{% static 'img/logo.png' %}"></p>');#}
                this.html.insert("<p style='text-align: center;'><img src='" + mylist[picture_num] + "'></p>");
                picture_num += 1;//第单击一次i的值加1；
                this.undo.saveStep();
            }
        });
        FroalaEditor.DefineIcon('insertHTML', {NAME: 'plus', SVG_KEY: 'add'});
        FroalaEditor.RegisterCommand('淘宝客二维码LINK', {
            title: '插入代码',
            focus: true,
            undo: true,
            refreshAfterCallback: true,
            callback: function () {
                {##从后台利用json.dumps 传过来给js的数据流，需要safe包装给mylist#}
                this.html.insert('<p style="text-align: center;">购物找不到优惠券？加微信 buy3600 轻松查，或者扫下面微信也可以哦<img style"width = 60px; height = 80px;" src="{% static 'peoplemod/content/20.jpg' %}"></p>');
                this.undo.saveStep();
            }
        });

        FroalaEditor.DefineIcon('clear', {NAME: 'remove', SVG_KEY: 'remove'});
        FroalaEditor.RegisterCommand('clear', {
            title: 'Clear HTML',
            focus: false,
            undo: true,
            refreshAfterCallback: true,
            callback: function () {
                this.html.set('');
                this.events.focus();
            }
        });

        editor = new FroalaEditor('div#froala-editor', {
            heightMin: 200,
            heightMax: 800,
            language: 'zh_cn',

            toolbarButtons: [
                ['bold', 'italic', 'underline', 'backgroundColor', 'emoticons', '', 'paragraphFormat', 'align', 'formatOL', 'formatUL'],
                ['undo', 'redo', 'html', 'clear', '插入评论图片|', 'undo', '淘宝客二维码LINK'],
                ['fontFamily', 'fontSize', 'textColor', 'backgroundColor'],
                ['insertHTML', 'undo', 'redo', 'clear']

            ]
        })
    </script>
    {#文本编辑框插件结束#}



{% endblock %}